<template>
 <h1>循环指令</h1>
  <ul>
    <!-- 从1开始遍历,一直到数字5,每循环一次,item++ -->
    <li v-for="item in 5">{{item}}</li>
  </ul>
  <ul>
    <!-- 循环遍历arr数组,item就是本轮循环遍历到的元素   -->
    <li v-for="item in arr">{{item}}</li>
  </ul>

  <table border="1px">
    <caption>商品表</caption>
    <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
 import {ref} from "vue";

 const arr = ref(['张三','李四','王五']);

 const productArr = ref([
   {title:"小米14",price:8000,num:200},
   {title:"华为Mate60",price:5000,num:100},
   {title:"苹果16",price:10000,num:700},
   {title:"魅族",price:2000,num:600}
 ]);

 const del = (i)=>{
   if(confirm('是否要删除本行数据?')){
     productArr.value.splice(i,1);
   }
 }
</script>

<style scoped>

</style>